<template>
  <div class="stereotypePage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="stereotype-main" v-if="!page.loading">

      <div class="stereotype-main-form">

        <Form :model="formItem" :label-width="100">

          <Form-item label="版型选择:">

              <template v-for="item in formItem.list">

                  <selectBox :img="'http://moupai.nx90.com/' + item.img" :text="item.shapename" @click.native="selectItem(item.id)" :checked="item.id == formItem.selectIndex"></selectBox>

              </template>

          </Form-item>

        </Form>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext"></bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认选择该版型？
        </h2>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex';
  import {getStereotype} from "api/getStereotype";
  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import selectBox from "base/selectbox";

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem:{
          selectIndex:-1,
          list:[],
        },
        modal:{
          state:false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setLinlingId":"SET_LINGINGID",
        "setStereotype":"SET_STEREOTYPE"
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      selectItem(id){
        this.formItem.selectIndex = id;
      },
      goto(page){
        this._getList(page);
      },
      pageNext(){
        this.$el.querySelector(".selectBox_active")?this.modal.state = true:this.$Notice.info({title: '错误', desc:'没有选择任何款式'});
      },
      asyncOK(){
        this.setNavIndex(this.navIndex + 1);
        this.setStereotype(this.formItem.selectIndex);
      },
      _getList() {
        if(!this.type){return}
        this.page.loading = true;
        getStereotype({id: this.type,goods:this.goodsId,lining:this.liningId}).then((Rs) => {
          this.page.loading = false;
          this.formItem.list = Rs.data;
        }).catch((error)=>{
          this.setNavIndex(1);
        })
      },
      _jugeData(){
        if(this.liningId === ""){
          this.pagePrev();
        }
      }
    },
    components: {
      bottomBtn,
      pageLoading,
      selectBox
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId'
      ])
    },
    mounted() {

    },
    updated(){

    },
    created() {
      this._getList();
    },
    activated(){
      this._jugeData();
    },
    deactivated(){

    },
    watch:{
      liningId(){
       this._getList();
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .stereotypePage{
    .stereotype-main-form{
      padding: 25px 0;

      .ivu-form-item-label{
        text-align: center;
        font-size: 14px;
      }

      .ivu-form-item-content{
        .clearfix();
      }
    }

    .content-page{
      text-align: center;
    }
  }

</style>
